<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../../../../resources/js/cadcliente.js"></script>
        <title>Alfaworks - Cadastro</title>
        <link rel="stylesheet" href="../../../../css/style.css">
        <link rel="stylesheet" href="../../../../css/cadastro-cliente.css">


    </head>
    <section class="container">

        <div class="cadastro">
            <form action="ServFront" method="get" name="formcadcliente" onsubmit="return alerta()">

                <h2>
                    Meu Cadastro - Cliente
                </h2>
                <table>
                    <tr>
                        <td>
                            <p>Para ser cliente, é necessário preencher corretamente o
                                formulário abaixo com os respectivos dados cadastrais. Todos os
                                campos são de preenchimento obrigatório para realização o
                                cadastro.</p> <br /> <u>Dados Gerais</u>

                    <table border="0">

                        <tr>
                            <td align="right">Nome Completo:</td>
                        <br />
                        <br />
                        <td><input type="text" id="nome" size="30" required> </td>
                        </tr>

                        <tr>
                            <td align="right">CPF:</td>
                            <td><input type="number"  id="cpf" size="20" required></td>
                        </tr>

                        <tr>
                            <td align="right">Data de nascimento:</td>
                            <td><input type="date" id="datanasc" required
                                       onblur="datanasc(this.form);" maxlength="10"
                                       placeholder="DD/MM/AAAA"
                                       onfocus="if (this.value == 'DD/MM/AAAA') {
                                                   this.value = '';
                                               }"></td>
                        </tr>

                        <tr>
                            <td align="right">Sexo:</td>
                            <td><input type="radio" name="masc" value="cliente">Masculino<input
                                    type="radio" name="fem" value="ps">Feminino</td>
                        </tr>

                        <tr>
                            <td align="right">Telefone fixo:</td>
                            <td><input type="number" id="dddtel"
                                       onblur="dddtel(this.form);" maxlength="11" required
                                       placeholder="DDDTELEFONE"
                                       onfocus="if (this.value == 'DDDTELEFONE') {
                                                   this.value = '';
                                               }"></td>
                        </tr>

                        <tr>
                            <td align="right">Telefone celular:</td>
                            <td><input type="number" id="dddcel" pattern="[1-9]" 
                                       onblur="dddcel(this.form);" maxlength="11"
                                       placeholder="DDDTELEFONE"
                                       onfocus="if (this.value == 'DDDTELEFONE') {
                                                   this.value = '';
                                               }"></td>
                        </tr>

                        
                        

                        <tr>
                            <td align="right">Email:</td>
                            <td><input type="email" id="email"
                                       onblur="email(this.form);" maxlength="30"
                                       placeholder="nome@example.com"
                                       onfocus="if (this.value == 'nome@example.com') {
                                                   this.value = '';
                                               }"></td>
                        </tr>

                        <tr>
                            <td align="right">Senha:</td>
                            <td><input type="password" name="senha" size="20" required></td>
                        </tr>

                        <tr>
                            <td align="right">Confirmação de senha:</td>
                            <td><input type="password" name="senha"  size="20" required></td>
                        </tr>

                    </table> <br /> <br /> <u>Dados Residenciais</u> <br /> <br />
                    <table border="0">
                        <tr>
                            <td align="right">Endereco:</td>
                            <td><input type="text" id="end" size="40" required></td>
                        </tr>

                        <tr>
                            <td align="right">Numero:</td>
                            <td><input type="number" id="num" size="10" required></td>
                        </tr>

                        <tr>
                            <td align="right">Complemento:</td>
                            <td><input type="text" id="comp"
                                       onblur="comp(this.form);" maxlength="8"
                                       placeholder="Ex: Apto 203"
                                       onfocus="if (this.value == 'formato: Ex: Apto 203') {
                                                   this.value = '';
                                               }"></td>
                        </tr>

                        <tr>
                            <td align="right">Bairro:</td>
                            <td><input type="text" id="bairro" size="10" required></td>
                        </tr>

                        <tr>
                            <td align="right">Cidade:</td>
                            <td><input type="text" id="cid" size="10" required></td>
                        </tr>


                        <tr>
                            <td align="right">Estado:</td>
                            <td><input type="text" id="est" size="10" required></td>
                        </tr>

                        <tr>
                            <td align="right">CEP:</td>
                            <td><input type="text" id="cep" required
                                       onblur="cep(this.form);" maxlength="8"
                                       placeholder="xxxxx-xxx"
                                       onfocus="if (this.value == 'formato: xxxxx-xxx') {
                                                   this.value = '';
                                               }"></td>
                        </tr>

                        <tr>
                            <td align="right">Ponto de referencia:</td>
                            <td><input type="text" name="infr" size="40"></td>
                        </tr>

                    </table>

                    </td>
                    </tr>
                </table>
                <br /> <br /> 
                <input type="button" onclick="window.history.back()" name="voltar" value="Voltar">
                <input type="submit" name="enviar" value="Enviar"> 

            </form>
        </div>
    </section>
</body>
</html>